<template>
  <cj-popup v-model="showRecommendPresent" class="c-bg-transparent c-w85">
    <div class="c-p dia-head-bg">
      <img class="c-w100 c-pa c-p-t16 c-pz-1" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/recommend/recommend-present-top2.png" alt="">
    </div>
    <div class="dialog-mid">
      <div class="c-ph64 c-pb20 c-maxh400 c-contexty-scroll">
        <div class="family-card-bg c-mb20 c-bg-white c-hh120 c-flex-row" v-if="familyCardData.familyCardList">
          <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-pv16">
            <div class="c-flex-column c-justify-sb c-h c-textAlign-l c-fc-white">
              <span class="c-fs24">{{familyCardData.name ? familyCardData.name : '亲情卡'}}</span>
              <span class="c-fs22">{{'包含' + (familyCardData.familyCardList ? familyCardData.familyCardList.length : 0) + '个商品'}}</span>
            </div>
            <div class="c-ww88 c-hh36 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c" style="background: #FFFFFF;color:#55B5FF;" @click="goPresent">查看</div>
          </div>
        </div>
        <div class="c-mb20 c-bg-white c-hh120 c-flex-row" v-if="integral">
          <div class="c-h c-ww124 c-pv20 c-flex-column c-justify-sb c-aligni-center c-fc-white">
            <img class="c-h" src="@/assets/i/wap/vip/point.png"/>
          </div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-ph14 c-pv16">
            <div class="c-flex-column c-justify-sb c-textAlign-l">
              <span class="c-fs30 c-fc-xblack c-fw-b">{{customPointName}}</span>
              <span class="c-fs22 c-fc-gray">{{'奖励'+integral + customPointName}}</span>
            </div>
            <div class="c-ww88 c-hh36 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c" style="background: #EE6D3F" @click="goMyPointDetail">查看</div>
          </div>
        </div>
        <template v-for="(item, index) in equityList">
          <div :key="index" class="c-mb20 c-bg-white c-hh120 c-flex-row" :class="item.type==5?'equity-vip-bg':'equity-svip-bg'">
            <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-pv16">
              <div class="c-flex-column c-justify-sb c-h c-textAlign-l c-fc-white">
                <span class="c-fs24">{{item.type==5?'VIP':'SVIP'}}</span>
                <span class="c-fs22">{{item.effectiveTime + '天体验卡'}}</span>
              </div>
              <div class="c-ww88 c-hh36 c-flex-shrink0 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c c-bg-white" :class="item.type==5?'c-fc-mblue':'c-fc-sorange'" @click="goVipCentural">查看</div>
            </div>
          </div>
        </template>
        <template v-if="discountList && discountList.length > 0">
          <coupon-item-com :key="index" v-for="(item, index) in discountList" :couponInfo="item" :size="'small'" :showFooter="false" class="c-textAlign-l" :class="index==discountList-1?'':'c-mb20'">
          </coupon-item-com>
        </template>
        <!-- <template v-for="(item, index) in discountList">
            <div :key="index" :class="index==discountList.length-1?'':'c-mb20'" class="c-hh120 c-flex-row" v-if="item.type != 1">
              <div v-if="item.type == 4" class="coupon-mb1 c-ww124 c-pv30 c-fc-white c-fs30 c-flex-row c-justify-center c-aligni-center">抵价券</div>
              <div v-else class="coupon-mb1 c-h c-ww124 c-pv30 c-flex-column c-justify-sb c-aligni-center c-fc-white">
                <div v-if="item.type == 5" class="c-fs0">
                  <span class="c-fs38">{{Number(item.price)}}</span>
                  <span class="c-fs18">折</span>
                </div>
                <div v-else class="c-fs0">
                  <span class="c-fs18">{{'￥' | iosPriceFilter}}</span>
                  <span class="c-fs38">{{Number(item.price)}}</span>
                </div>
                <span class="c-fs18">{{item.type == 2 || item.type == 5 ? '无门槛' : '满' + Number(item.amount) + '元使用'}}</span>
              </div>
              <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-ph14 c-pv16 c-bg-white">
                <div class="c-flex-column c-justify-sb c-h c-textAlign-l c-flex-1">
                  <span class="c-fs24 c-fc-xblack c-ww150 c-text-ellipsis1">{{item.name}}</span>
                  <span v-if="item.validStatus != 1 && item.validStatus != 2" class="c-fs14 c-fc-gray">{{item.startAt.replace(/-/g,'.').split(' ')[0]}} - {{item.endAt.replace(/-/g,'.').split(' ')[0]}}</span>
                  <span v-else class="c-fs14 c-fc-gray">{{item.validStatus == 1 ? ('领券当日起' + item.validPeriod + '天内可用') : ('领券次日起' + item.validPeriod + '天内可用')}}</span>
                  <span v-if="item.type == 4" class="c-fs18 c-fc-gray">适用于预约师资</span>
                  <span v-else class="c-fs18 c-fc-gray">{{item.redeemId ? '适用于指定商品':'适用于全部商品'}}</span>
                </div>
                <div class="c-ww88 c-hh36 c-flex-shrink0 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c c-flex-1" style="background: #EE6D3F" @click="goMyValueVoucher(2)">查看</div>
              </div>
            </div>
            <div :key="index" :class="index==discountList.length-1?'':'c-mb20'" class="c-hh120 c-flex-row" v-else>
              <div class="exchange-left1 c-h c-ww124 c-flex-column c-justify-center c-aligni-center c-fc-white c-fs30">
                兑换券
              </div>
              <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-ph14 c-pv24 c-bg-white c-h">
                <div class="c-flex-column c-justify-sb c-h c-textAlign-l c-flex-1">
                  <span class="c-fs24 c-fc-xblack c-ww150 c-text-ellipsis1">{{item.name}}</span>
                  <span v-if="item.validStatus != 1 && item.validStatus != 2" class="c-fs16 c-fc-gray c-ws-n c-text-ellipsis1">{{item.startAt.replace(/-/g,'.').split(' ')[0]}} - {{item.endAt.replace(/-/g,'.').split(' ')[0]}}</span>
                  <span v-else class="c-fs16 c-fc-gray">{{item.validStatus == 1 ? ('领券当日起' + item.validPeriod + '天内可用') : ('领券次日起' + item.validPeriod + '天内可用')}}</span>
                </div>
                <div class="c-ww88 c-hh36 c-flex-shrink0 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c c-flex-1" style="background: #EE6D3F" @click="goMyValueVoucher(1)">查看</div>
              </div>
            </div>
          </template> -->
      </div>
    </div>
    <div class="c-p">
      <img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/recommend/recommend-present-bot.png" alt="" class="c-w100 c-pa c-p-t0 c-pz-1">
      <div class="c-fc-white c-textAlign-c c-fs22 c-pt40 c-ph50 c-hh130">
        <template v-if="from !='knowledgeOrderDetail'">
          <div v-if="from=='payPolitely'" class="c-hh86 c-flex-row c-justify-center c-aligni-center">您的礼包已到账，可在<span @click="goOrderDetail" class="c-fc-reword c-ws-n c-wb-ba">订单详情</span>查看</div>
          <span v-else class="c-hh86 c-flex-row c-justify-center c-aligni-center c-ph14">
            {{checkText}}
          </span>
        </template>
      </div>
    </div>
    <div class="c-mt40 c-textAlign-c" @click="closePresent"><span class="iconfont c-fc-white c-fs48">&#xe84e;</span></div>
  </cj-popup>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import couponItemCom from "@/components/templates/couponItemCom.vue";
export default {
  name: 'recommendPresent',
  components: {
    couponItemCom
  },
  props: {
    from: { // 来自哪里  index表示首页
      type: String,
      default: ''
    }
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      discountList: [],
      equityList: [],
      familyCardData: {},
      integral: 0,
      showRecommendPresent: false,
      checkText: ''
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  methods: {
    //被推荐人完成推荐任务
    completetRecommendTask(data) {
      var $this = this;
      let url = '';
      if (this.from == 'payPolitely' || this.from == 'knowledgeOrderDetail' || this.from == 'coursePay' || this.from == 'vipBuy') {
        url = `${global.apiurl}activity/recommend/finishRecommendInfo`;
      } else {
        url = `${global.apiurl}activity/recommend/finishRecommendTask`;
      }
      utilJs.postMethod(url, data,
        res => {
          if ($this.from == 'coursePay' || $this.from == 'payPolitely') {
            $this.$emit('setSuccessRecommendFlag', 1)
          }
          if (res.status == 1) {
            let textArr = [];
            if (res.data.discountList && res.data.discountList.length > 0) {
              textArr.push('“优惠券”');
              $this.discountList = res.data.discountList;
            }
            if (res.data.equityList && res.data.equityList.length > 0) {
              textArr.push('“会员中心”');
              $this.equityList = res.data.equityList;
            }
            if (res.data.familyCardData && res.data.familyCardData.familyCardList) {
              textArr.push('“赠送记录”');
              $this.familyCardData = res.data.familyCardData;
            }
            if (res.data.integral) {
              textArr.push(this.customPointName + '“明细”');
              $this.integral = res.data.integral;
            }
            $this.checkText = '可在个人中心-' + textArr.join('、') + '入口查看';
            if (textArr.length > 0) {
              $this.showRecommendPresent = true;
              if ($this.from == 'index') { // 首页要进行别的处理
                $this.$emit('showPresent', textArr)
              }
            } else if ($this.from == 'vipBuy' || $this.from == 'coursePay') {
               $this.$emit('paySuccessCallBack'); // vip支付后，没有礼品，需要回调支付成功的方法
            }
          } else {
            $this.$cjConfirm({
              title: '领取失败',
              message: res.info,
              showCancelButton: false,
              clickCloseModal: false,
              onConfirm:() => {
                if ($this.from == 'index') { // 首页要进行别的处理
                  $this.$emit('alertOnHide', res.info)
                } else if ($this.from == 'vipBuy' || $this.from == 'coursePay') {
                  $this.$emit('paySuccessCallBack'); // vip支付后，没有礼品，需要回调支付成功的方法
                }
              }
            })
          }
        })
    },
    //关闭升级礼包
    closePresent() {
      this.showRecommendPresent = false;
      if (this.from == 'coursePay') {
        this.$emit('paySuccessCallBack');
      }
    },
    //前往赠送记录
    goPresent() {
      let routerType = 'push';
      if (this.from == 'coursePay' || this.from == 'payPolitely') {
        this.$emit('beforeChangeRoute');
        routerType = 'replace';
      }
      this.showRecommendPresent = false;
      this.$routerGo(this, routerType, { path: "/member/presentCourse/presentCourseList" });
    },
    //前往我的优惠券
    goMyValueVoucher(type) {
      let routerType = 'push';
      if (this.from == 'coursePay' || this.from == 'payPolitely') {
        this.$emit('beforeChangeRoute');
        routerType = 'replace';
      }
      this.showRecommendPresent = false;
      if (type == 1) {
        this.$routerGo(this, routerType, { path: "/member/myValueVoucher/myValueVoucher", query: {couponType: 1} });
      } else {
        this.$routerGo(this, routerType, { path: "/member/myValueVoucher/myValueVoucher", query: {couponType: 2} });
      }
    },
    //前往积分明细
    goMyPointDetail() {
      let routerType = 'push';
      if (this.from == 'coursePay' || this.from == 'payPolitely') {
        this.$emit('beforeChangeRoute');
        routerType = 'replace';
      }
      this.showRecommendPresent = false;
      this.$routerGo(this, routerType, { path: "/member/myIntegral/integralDetail" });
    },
    //前往会员中心
    goVipCentural() {
      let routerType = 'push';
      if (this.from == 'coursePay' || this.from == 'payPolitely') {
        this.$emit('beforeChangeRoute');
        routerType = 'replace';
      }
      this.showRecommendPresent = false;
      this.$routerGo(this, routerType, { path: "/member/vip/vipUp" });
    },
    // 跳转到订单列表
    goOrderDetail() {
      this.$emit('goOrderDetail');
    }
  }
}
</script>
<style scoped>
  .family-card-bg {
  background: url("../../assets/i/wap/vip/familyCard.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem
}
.equity-vip-bg {
  background: url("../../assets/i/wap/recommend/VIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem
}
.equity-svip-bg {
  background: url("../../assets/i/wap/recommend/SVIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem
}
.dia-head-bg {
  padding-top: 5rem;
}
.dialog-mid {
  background: url("../../assets/i/wap/recommend/recommend-present-mid.png") no-repeat;
  background-size: 100% 100%;
  padding-right: 0.4rem;
}
.coupon-mb1 {
  background: url("../../../public/i/wap/vip/coupon-mb1.png");
  background-size: cover;
}
.exchange-left1 {
  background: url("../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
</style>
